<template>
    <div class="role-page">
        <div class="left">
            <role-tree @select-node="(id) => {current_node_id = id}"></role-tree>
        </div>
        <div class="right">
            <div class="no-data" v-if="!current_node_id">
                <div class="no-data-content">no data</div>
            </div>
            <div class="content" v-else>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="功能菜单权限" name="first">
                        <menu-rights :role_id="current_node_id"></menu-rights>
                    </el-tab-pane>
                    <el-tab-pane label="数据字段权限" name="second">
                        <data-rights :role_id="current_node_id"></data-rights>
                    </el-tab-pane>
                    <el-tab-pane label="角色账号列表" name="third">
                        <role-account :role_id="current_node_id"></role-account>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,reactive,watch } from 'vue'
import roleTree from './component/role-tree'
import menuRights from './component/menu-rights'
import dataRights from './component/data-rights'
import roleAccount from './component/role-account'

const current_node_id = ref()
const activeName = ref('first')

</script>
<style lang="scss">
.role-page{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px 32px 24px 24px;
    display: flex;

    .left{
        width: 276px;
        height: 100%;
        box-sizing: border-box;
        border:1px solid #ebeef5;
        border-radius: 8px;
        padding: 16px;
        margin-right: 16px;
    }

    .right{
        flex: 1;
        width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;

        .content,
        .no-data{
            display: flex;
            width: 100%;
            height: 100%;
        }

        .no-data{
            align-items: center;
            justify-content: center;

            .no-data-content{
                width: 451px;
                height: 300px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

        .content{
            .el-tabs{
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;

                .el-tabs__content{
                    flex: 1;
                    height: 0;

                    .el-tab-pane{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
        }
    }


}
</style>